<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
</h:head>

<h:body>

	<ui:composition template="/commonLayout.xhtml">
		<ui:define name="content">

			<h:form id="formEspacePerso">

				<table style="width: 100%;">
					<tr>
						<td style="width: 50%;"><p:commandButton styleClass="btn btn-info"
								id="ajoutDossier" type="button" value="Ajouter"
								onclick="dlgAjoutDossier.show()" /> <p:commandButton
								onstart="if (!confirm('Etes-vous sûr ?')) return false;"
								id="suppDossier" value="Supprimer"
								actionListener="#{espacePersoBean.supprimerRepertoire}"
								update=":formEspacePerso:dossiers" styleClass="btn "/> <br />
						<br /> <p:dialog header="Création d'un répertoire"
								widgetVar="dlgAjoutDossier" resizable="false">
								<h:form id="formAjoutDossier">

									<h:panelGrid columns="2" style="margin-bottom:10px">
										<h:outputLabel for="nomDossier" value="Nom du dossier:" />
										<p:inputText id="nomDossier"
											value="#{espacePersoBean.nouveauDossier}" />
									</h:panelGrid>

									<p:commandButton id="submitButton" styleClass="btn" value="Ajouter"
										actionListener="#{espacePersoBean.ajouterRepertoire}"
										update=":formEspacePerso:dossiers"
										oncomplete="dlgAjoutDossier.hide();" type="button"/>

								</h:form>
							</p:dialog> <p:tree styleClass="espacePerso" value="#{espacePersoBean.root}"
								var="node" id="dossiers" selectionMode="single" dynamic="true"
								cache="false">

								<p:ajax event="select" update=":formEspacePerso"
									listener="#{espacePersoBean.onDirectorySelect}" />

								<p:treeNode id="treeNode">
									<h:outputText value="#{node}" id="lblNode" />
								</p:treeNode>
							</p:tree></td>
						<td style="width: 50%;">
						
						<p:commandButton id="ajoutFichier"
								type="button" value="Ajouter" onclick="dlgAjoutFichier.show()" styleClass="btn btn-info" /> 
								
								<br/><br/>
								
							<p:dialog
								header="Ajout de fichiers" widgetVar="dlgAjoutFichier"
								resizable="false" width="800">
								<h:form id="formAjoutFichier">

									<h:panelGrid columns="2" style="margin-bottom:10px">
										<p:fileUpload
											fileUploadListener="#{espacePersoBean.fileUpload}"
											mode="advanced" sizeLimit="100000"
											allowTypes="/(\.|\/)(gif|jpe?g|png)$/" multiple="true" 
											showButtons="false" label="Ajouter" auto="true"  />
									</h:panelGrid>

								</h:form>
							</p:dialog> <p:dataTable styleClass="espacePerso" id="fichiers" var="f"
								selection="#{espacePersoBean.selectedFiles}"
								value="#{espacePersoBean.modelFichiers}" paginator="true"
								rows="10" selectionMode="single">

								<p:ajax event="rowSelect"
									listener="#{espacePersoBean.onFileSelect}"
									update=":formEspacePerso" />

								<p:column headerText="Id">  
						            #{f.id}  
						        </p:column>

								<p:column headerText="Fichiers">  
						            #{f.nom}  
						        </p:column>
							</p:dataTable></td>
					</tr>
					<tr>
						<td colspan="2" style="width: 100%; text-align: center;"><br />
							<br /> <h:outputFormat escape="false" id="content"
								value="#{espacePersoBean.newContent}"></h:outputFormat></td>
					</tr>

				</table>
			</h:form>

		</ui:define>
	</ui:composition>

</h:body>
</html>